<template>
<div class="row">
  <vs-modal title="订阅" show="{{@ showSubscribeCfg}}" effect="fade" width="800">
    <div class="modal-body">
      <form class="form-horizontal">
        <div class="form-group" v-show="showTopoId">
          <label class="col-sm-2 control-label">TopoId</label>
          <div class="col-sm-10">
            <input type="text" class="form-control input-sm" v-model="uriTopoId" number>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">Process</label>
          <div class="col-sm-10">
            <input type="text" class="form-control input-sm" v-model="uriProcess" >
          </div>
        </div>       
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" v-on="click: doSubscribeAll">订阅</button>
      <button type="button" class="btn btn-default" v-on="click: doUnSubscribeAll">退订</button>
    </div>   
  </vs-modal>
  <div class="col-md-12">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-form pull-right">
          <form class="form-inline">     
            <div class="form-group">
              <label class="control-label">模块选择</label>
              <select class="form-control input-sm" v-model="selectedModule" options="modulesOptions"></select>
            </div>
            <div class="form-group">
              <label class="control-label">URI过滤</label>
              <input type="text" class="form-control input-sm" v-model="uriFilterStr">
              <label class="control-label">已过滤：{{filterCnt}}</label>
            </div>
            <button class="btn btn-sm btn-default" v-on="click: doConnectWs">
              连接
            </button>
            <button class="btn btn-sm btn-default" v-on="click: doShowSubscribeCfg">
              订阅
            </button>
            <button class="btn btn-sm btn-default" v-on="click: doClearLog">
              清空
            </button>
          </form>
        </div>
      </div>
    </nav>
    <div class="col-md-12" id="wslog">
    </div>
  </div>
</div>
</template>

<script>
var settings = require('../lib/settings');
var productCfg = settings.productCfg;
var hostCfgs = productCfg.hostCfgs;
var utils = require('../lib/utils');
var log = require('../lib/log');
var api = require('../lib/api');

module.exports = {
  replace: true,
  data: function() {
    return {
      uriTopoId: 0,
      uriProcess: '',
      showSubscribeCfg: false,
      selectedModule: 'Server',
      modulesOptions: [],
      uriFilterStr: '',
      filterCnt: 0
    }
  },
  computed: {
    'showTopoId': function() {
      return this.selectedModule === 'Server' ? true : false;
    }
  },
  methods: {
    wsReportInit: function(wsHost) {
      var ws;
      var wsUrl = wsHost + '/websocket/report';

      ws = new WebSocket(wsUrl, ['chat']);
      ws.onopen = function(e) {
        $('#wslog').append('<p>WebSocket Open Success</p>'); 
      };
      ws.onmessage = function(e) {
        if (this.uriFilterStr != '') {
          var msgData = JSON.parse(e.data);
          var patt = new RegExp('.*' + this.uriFilterStr + '.*');
        }

        if ((this.uriFilterStr === '')
          || (patt.test(msgData.URI))) {
          $('#wslog').append('<p>Received: ' + e.data + '</p>');
        } else {
          this.filterCnt++;
        }
      }.bind(this);
      ws.onclose = function(e) {
        $('#wslog').append('<p>Close message received: ' + e.data + '</p>');
      };
      ws.onerror = function(e) {
        $('#wslog').append('<p>Error message received: ' + e.data + '</p>');
      };
      this.ws = ws;
    },
    wsReportUnInit: function() {
      if (this.ws) {
        this.ws.close();
        this.ws = null;
      }
    },
    doShowSubscribeCfg: function() {
      this.showSubscribeCfg = true;
    },
    doSubscribeAction: function(action) {
      this.showSubscribeCfg = false;
      if (!this.ws) {
        log.showError('Null WebSocket');
        return;
      }
      var subscribeUri;
      if (this.showTopoId) {
        subscribeUri = '/devs/' + this.uriTopoId + '/' + this.uriProcess + '/cmd';
      } else {
        subscribeUri = '/dev/' + this.uriProcess + '/cmd';
      }
      var msgData = {
        URI: subscribeUri,
        body: {
          action: action
        }
      };

      this.ws.send(JSON.stringify(msgData));
      $('#wslog').append('<p>' + action + ': ' + subscribeUri + '</p>');
    },
    doSubscribeAll: function() {
      this.doSubscribeAction('subscribeAll');
    },
    doUnSubscribeAll: function() {
      this.doSubscribeAction('unsubscribeAll');
    },
    doClearLog: function() {
      this.filterCnt = 0;
      document.getElementById('wslog').innerHTML = "Clear Done";
    },
    doConnectWs: function() {
      var wsHost = api.getWsHost(this.selectedModule);
      if (null === wsHost) {
        log.showError('Invalid Module');
        return;
      }

      api.auth.login(this.selectedModule, function(res) {
        if (res.code === 0) {
          this.wsReportUnInit();
          this.wsReportInit(wsHost);
        } else {
          log.showErrorWithRes(res);         
        }          
      }.bind(this));
    }
  },
  ready: function() {
    for (var i = 0; i < hostCfgs.length; i++) {
      var hostCfg = hostCfgs[i];

      this.modulesOptions.splice(this.modulesOptions.length, 0, hostCfg.moduleName);
    }
  }
}
</script>

<style>
</style>